<template>
    <div class="header-view">
        <div class="logo">
            <!-- <img src="../../assets/vue.svg" class="logo vue" alt="Vue logo" /> -->
            <el-icon :size="34">
                <Sunrise />
            </el-icon>
            <span>logo</span>
        </div>
        <div class="user">
            <el-dropdown trigger="click">
                <span>
                    <el-avatar :size="50" :icon="UserFilled" />
                    <span class="userName">{{ cookies.get('username') ? cookies.get('username') : 'userName' }}</span>
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="logOut()">退出登录</el-dropdown-item>
                        <el-dropdown-item divided>修改密码</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup lang="ts">
import { UserFilled, ArrowDown } from '@element-plus/icons-vue'
import { onMounted, ref, inject } from "vue";
import { useRouter } from 'vue-router';
import { post } from '../../utils/index.ts'
import { ElMessage } from 'element-plus'


const cookies = inject('$cookies') as any
const router = useRouter()
const header = ref(0)
onMounted(() => {
    // console.log();

})

const logOut = async () => {

    let data = {
        username: cookies.get('username')
    }
    router.replace('/login')
    let res: any = await post('/sys/logout', data)
    if (res && res.code == 0) {
        ElMessage.success('退出登录成功')
    }

    // console.log('logout', res);

}
</script>

<style lang="scss" scoped>
.header-view {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 20px;
    background-color: #545c64;

    .logo {
        display: flex;
        align-items: center;
        height: 100%;
        box-sizing: border-box;
        color: #fff;

        image {
            padding: 2px 10px;
        }

        span {
            font-size: 30px;
            margin: 0 10px;
            font-weight: 600;
            color: #fff;
        }
    }

    .user {
        display: flex;
        align-items: center;
        height: 100%;
        box-sizing: border-box;
        position: relative;

        .el-dropdown-link {
            cursor: pointer;
            color: var(--el-color-primary);
            display: flex;
            align-items: center;
        }

        .userName {
            font-size: 18px;
            margin: 0 5px;
            color: #999;
            width: 100px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }

}
</style>